<template>
	<view class="container">
		<view class=" info_contain">
			<view class="info_part">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="">
					<view class="name">
						{{userInfo.nickname}}
					</view>
				</view>
			</view>

			<view class="tag_list top">
				<view class="tags" :class="type==index?'active_tag':''" v-for="(item,index) in  holidayList" @click="selectTagType(index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="tag">
			<view class="top">
				<view class="yellow_line">
				</view>
				<view class="title">
					描述
				</view>
				<view class="beizhu">
				</view>
			</view>
			<textarea v-model="describe" placeholder="请描述理由不超过200字" placeholder-style="font-size28rpx;color:#BBBBBB" maxlength="200" />
		
		</view>
			<HandleBtn btnName="创建直播" class="bottom_btn" @click.native="createLiveSaveHttp"></HandleBtn>
		</view>
</template>

<script>
	import Blank from "../../components/blank.vue"
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
	  components:{
			Blank,
			HandleBtn
	  },
	  data () {
	    return {
	      roomId: 0,//房间号--加入相同房间才能聊
	      client: '',//客户端服务
		  holidayList: ['直播招聘','500强'],
		  type: '',
		  describe: '',
		  userInfo: {}
	    }
	  },
	
	 mounted () {
	    //测试用，所以直接创建了，其他需求可自行更改
	 },
	 created () {
		 uni.getStorage({
			 key: 'userinfo',
			 success:(res) => {
			 	this.userInfo = res.data;
			 }
		 });
	 },
	 methods: {
		 selectTagType(index){
		 	this.type=index;
		 },
	    //创建链接
		createZhibo() {
			if (this.roomId === 0 && !this.userInfo.id) {
				this.$utils.showLayer("还没准备好");
			}
			//用户点击我的钱包，发起语音聊天
			uni.$emit("startLiveRoom",{
				roomId: this.roomId,
				title: this.userInfo.nickname + '的直播',
				callback: this.closeLive,
			});
		},
		//  把房间储存在服务器  
		createLiveSaveHttp(){
			this.$utils.requert({
					url: 'roomCreate',
					type: 'post',
					data: {
						image: '',
						type: this.type,
						desc: this.describe,
					}
				}).then(res => {
					// this.roomId = parseInt(Math.round() * 100)  ;
					// this.createZhibo();
					console.log('res', res);
					console.log('createLiveSaveHttp', res);
					if (res.code === 1 || this.roomId !== 0) {
						// this.roomId = res.data.uid + 1;
						this.roomId = res.data.uid;
						this._ROOMID = res.data.id;
						this.createZhibo();
					} else if (res.code === 0) {
						this.roomId = res.data.uid;
						this._ROOMID = res.data.id;
						this.createZhibo();
					} else {
						this.$utils.showLayer("服务器:",res.message);
					}
				});
		},
		// 关闭直播
		closeLive () {
			this.$utils.requert({
					url: 'roomClose',
					type: 'post',
					data: {
						roomId: this._ROOMID
					}
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer("直播关闭");
					} else {
						this.$utils.showLayer(res.message);
					}
				});
		},
		getLiveRoomId () {
			this.$utils.requert({
					url: 'myRoom',
					type: 'post',
				}).then(res => {
					if (res.code === 1) {
						console.log('获得房间ID', res);
						this.roomId = res.data.uid;
					} else {
						this.$utils.showLayer(res.message);
					}
				});
		},
	  }
	}
</script>

<style>
	.container {
			width: 100%;
			height: 100%;
			margin-bottom: 100rpx;
		}
		.top {
			display: flex;
			align-items: center;
			margin-bottom: 38rpx;
			margin-top: 42rpx;
		}
		
		.yellow_line {
			width: 10rpx;
			height: 35rpx;
			background-color: #fd9103;
			border-radius: 50rpx;
			margin-right: 10rpx;
		}
		
		.title {
			font-size: 34rpx;
			color: #323232;
		}
		
		.beizhu {
			font-size: 28rpx;
			color: #BBBBBB;
		}
		.tag{
			margin:0 20rpx;
		}
		.tag_list{
			display: flex;
			flex-wrap: wrap;
		}
		.tags{
			font-size: 28rpx;
			color:#333333;
			width:160rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			border-radius: 7rpx;
			border:3rpx solid #fb8408;
			margin-right: 16rpx;
			margin-bottom: 30rpx;
		}
		.active_tag{
			background-color: #FCA601;
			border:none;
		}
		.info_contain{
			margin:40rpx 30rpx 0;
		}
		.info_part{
			display: flex;
			align-items: center;
		}
		.info_part image{
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		.info_part .name{
			font-size: 32rpx;
			color: #363636;
		}
		.info_part .age{
			font-size: 24rpx;
			color: #A3A2A2;
		}
		.content{
			font-size: 28rpx;
			color: #363636;
			margin-bottom: 40rpx;
			margin-top: 20rpx;
		}
		textarea{
			width:100%;
			min-height: 316rpx;
			padding:24rpx;
			box-sizing: border-box;
			background-color: #f5f4f6;
			font-size: 28rpx; 
		}
		.bottom_btn{
			margin-top: 60rpx;
		}
</style>
